<template>
	 
	<van-row style="align-items: center">
	  <van-col span="22"> <van-search v-model="value"   placeholder="搜索相关职务" /> </van-col>
	  <van-col span="2"> 搜索</van-col>
	</van-row>
	
	<van-row style="align-items: center" class="title">
	  <van-col span="22" >历史搜索 </van-col>
	  <van-col span="2">  <van-icon name="delete" size="20" /></van-col>
	</van-row>
	
	<div class=" flex warp" >
		<div :class="item == cur1?'item cur-item':'item'" v-for="(item,index) in history" :key="`history${index}`"  @click="choose(item)">
			{{item}}
		</div>
	</div>
	
	<van-row style="align-items: center" class="title">
	  <van-col span="22" > 大家都在搜 </van-col> 
	</van-row>
	
	<div class="flex warp" >
		<div :class="item == cur2?'item cur-item':'item'" v-for="(item,index) in hot" :key="`hot${index}`"  @click="chooseHot(item)">
			{{item}}
		</div>
	</div>
	
	
</template>

<script> 
	import {mapState,mapMutations} from 'vuex';  
	export default {
		data() {
			return { 
				history:"爱情,兼职,外卖".split(","),
				hot:"爱情,兼职,外卖".split(","),
				value:'',
				cur1:"",
				cur2:"",
			}
		}, 
	
		computed:{...mapState(['city'])},
		 
		methods: { 
			 choose(val){
				this.value = val;
				this.cur1 = val; this.cur2 = '';
			 },
			 chooseHot(val){
			   this.value = val;	
			   this.cur2 = val;this.cur1 = '';
			 },
			 doSearch(){
				 
			 },
		},
		  
	}
</script>

<style scoped>
 .title{ background: #339966;color:#FFF}
 .item{ margin:5px;background: #f2f2f2; padding:2px 5px;border-radius: 4px; color:#C3C3C3}  
 .cur-item{ background: #339966;color:#FFF} 
</style>